<!--
  文件列表
-->
<template>
  <div v-show="fileList.length" class="uploader-file-list">
    <div v-for="(file, index) in fileList" :key="index" class="file-box">
      <AvicFile
        :key="file.id"
        :task-name="taskName"
        :flow-uploader="flowUploader"
        :entry-id="entryId"
        :allow-encry="allowEncry"
        :allow-preview="allowPreview"
        :allow-delete="allowDelete"
        :allow-download="allowDownload"
        :allow-update-secret-level="allowUpdateSecretLevel"
        :form-id="formId"
        :view-type="viewType"
        :show-size="showSize"
        v-bind="$attrs"
        :file="file"
        :show-creation-name-and-date="showCreationNameAndDate"
        @preview="preview"
        @remove="removeFile"
      />
    </div>
    <!-- <AvicPreview v-model="previewFile" :allow-encry="allowEncry" /> -->
  </div>
</template>

<script lang="ts" setup>
import AvicFile from './file.vue';
const props = defineProps({
  /** 文件列表 */
  fileList: {
    type: Array,
    required: true, // 校验
    default: null
  },
  /** 表单id */
  formId: {
    type: String,
    required: false, // 校验
    default: ''
  },
  /** 是否可以修改密级 */
  allowUpdateSecretLevel: {
    type: Boolean,
    default: false
  },
  /** 一列显示多少个 */
  colspan: {
    type: Number,
    default: 1
  },
  /** 是否允许删除附件 */
  allowDelete: {
    type: Boolean,
    default: false
  },
  /** 是否允许下载附件 */
  allowDownload: {
    type: Boolean,
    default: false
  },
  /** 是否允许预览 */
  allowPreview: {
    type: Boolean,
    default: false
  },
  /** 是否加密 */
  allowEncry: {
    type: Boolean,
    required: false,
    default: false
  },
  /** 是否流程上传 */
  flowUploader: {
    type: Boolean,
    required: false, // 校验
    default: false
  },
  /** 流程节点 */
  taskName: {
    type: String,
    required: false, // 校验
    default: ''
  },
  /** 实例id */
  entryId: {
    type: String,
    required: false, // 校验
    default: ''
  },
  /** 视图类型 line block */
  viewType: {
    type: String,
    required: false, // 校验
    default: 'line'
  },
  /** 是否显示文件大小 */
  showSize: {
    type: Boolean,
    required: false,
    default: true
  },
  /** 是否显示上传人上传时间 */
  showCreationNameAndDate: {
    type: Boolean,
    required: false,
    default: true
  }
});
const span = ref(24);
const previewFile = ref();
watch(
  () => props.colspan,
  (newV) => {
    if (newV) {
      if (newV > 3) {
        span.value = 24 / 3;
      } else if (newV < 1) {
        span.value = 24 / 1;
      } else {
        span.value = 24 / newV;
      }
    }
  },
  { immediate: true }
);
/**
 * 组件回调事件
 * remove 删除回调
 */
const $emit = defineEmits(['remove']);
/**
 * 删除文件
 * @param file 文件
 */
function removeFile(file) {
  $emit('remove', file);
}
/**
 * 预览图片
 * @param file 文件
 */
function preview(file) {
  previewFile.value = file;
}
</script>

<style lang="less">
.file-list {
  margin-top: 4px;
  padding: 4px;
  line-height: 22px;
  background: #f8f9fa;
  border-radius: 4px;
}

.file-box {
  display: inline-block;
  margin-right: 12px;
}
</style>
